<template>
  <div>
    <h1>{{ title }}</h1>
    <div>
<!--      <span>👍 {{ likes }}</span> |-->
      <span>👍 {{ likes1 }}</span> |
      <i>{{ publishAt }}</i> |
      <b>{{ author }}</b>
    </div>
    <button @click="likes1++">likes++</button>
    <div v-html="content"></div>
<!--    <div>{{ content }}</div>-->
    <div v-if="comments.length === 0">暂无评论</div>
    <ul v-else>
      <li
        v-for="(item, index) of comments"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
    <hr>
    <div>
      name: {{ person.name }}
      age: {{ person.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogPost',
  // 父组件传过来的值
  // props: ['title', 'likes', 'publishAt', 'author', 'content', 'comments'],
  props: {
    title: {
      type: String,
      required: true
    },
    likes: Number,
    publishAt: String,
    author: {
      type: String,
      default: '暂无'
    },
    content: String,
    // comments: Array
    comments: {
      type: Array,
      // default: []
      // 工厂函数：默认值是 Array, Object, Function
      default: () => []
    },
    person: {
      type: Object,
      default: () => ({})
      // default: () => {} // 函数
    },
    callBackFun: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      likes1: this.likes
    }
  },
  /*
  computed: {
    likes1() {
      return this.likes
    }
  }*/
}
</script>

